<template>
    <div class="homeSearch">
      <div class="comment-module" v-if="info.search_type === 3" ﻿@tap="next('/movie/postDetails?id='+info.posts_id)">
        <post-module :item="info" :isSearchPage = "true"></post-module>
      </div>

      <div class="hotGroup" v-if="info.search_type === 2" ﻿@tap="next('/social/groupDetails?id='+info.group_id)">
        <div class="hotGroup-main" :class="background?'hotGroup-all':''">
          <img :src="picPre + info.cover" alt="">
          <div>
            <div>
              <div class="hotGroup-header">
                <div class="hotGroup-header-title">
                  <p>{{info.name}}</p>
                  <p><i class="iconfont iconren" style="font-size: 22rpx; color: #ffffff;"></i><span>{{info.total_num}}</span></p>
                </div>
                <p v-if="info.is_add === 'no'" style="background-color: #77E6BC;">已加入</p>
                <p v-else ﻿@tap.stop="joinBtn(info.group_id)">加入</p>
              </div>
              <p>
                {{info.describe}}
              </p>
            </div>
          </div>
        </div>
      </div>

      <div class="collectProject" v-if="info.search_type === 1" ﻿@tap="next('/project/detail?id='+info.id)">
        <img :src="picPre + info.pic" alt="">
        <div class="collectProject-content" >
          <h1>{{info.title}}</h1>
          <p><span class="tags" v-for="(projectItem,index) in info.tags" :key="index">{{projectItem.title}}</span></p>
          <p class="actor-box">演员阵容：<span class="actor" v-for="(projectItem,index) in info.actor_list" :key="index">{{projectItem.name}}</span></p>
          <p>{{info.release_time}}上映</p>
        </div>
      </div>
    </div>
</template>

<script>
  import postModule from "@/components/comment/item.vue"
  import { mapState } from 'vuex'
    export default {
        name: "index",
      components:{
        postModule
      },
        props:{
          info:{
            type:Object
          }
        },
      data(){
        let that = this;
        return{
          picPre: that.$api.picPre,
        }
      },
      methods:{
        next(router){
          if(!this.isLogin){
            let that = this;
            ﻿uni.showModal({
              title: '亲，您尚未登录',
              content: '前去登录吧~',
              success (res) {
                if (res.confirm) {
                  ﻿uni.navigateTo({ 				  	
					  url:'/person/login',
					  })
                }
              }
            });
          }else {
			  uni.navigateTo({
			  	url: router
			  })
          }
        },
        joinBtn(id){
          this.$ajax
            .post(this.$api.addGroup,{id:id})
            .then(res => {
              ﻿uni.showToast({
                title: "加入成功！",
                icon: 'success',
                duration: 2000
              });
              this.info.is_add = 'no';
            })
            .catch(err => {
              ﻿uni.showToast({
                title: err,
                icon: 'none',
                duration: 2000
              })
            });
        }
      },
      computed: {
        ...mapState([
          'isLogin'
        ])
      },
    }
</script>

<style scoped>
  .homeSearch{
    padding: 0 30rpx;
  }
  .comment-module{
    padding: 30rpx 30rpx 0 22rpx;
    border-bottom: 14rpx solid #F7F7F7;
  }



  .hotGroup-main{
    width: 100%;
    border-bottom: 14rpx solid #F7F7F7;
    display: flex;
    padding-top: 31rpx;
    padding-left: 2rpx;
    box-sizing: border-box;
    margin-bottom: 20rpx;
  }
  .hotGroup-main>img{
    width: 108rpx;
    height: 108rpx;
    display: block;
    border-radius: 50%;
  }
  .hotGroup-main>div{
    flex: 1;
    padding-left: 37rpx;
    box-sizing: border-box;
    width: 80%;
  }
  .hotGroup-header{
    display: flex;
    justify-content: space-between;
  }
  .hotGroup-header>p{
    background-color: #F0A75F;
    width: 110rpx;
    height: 49rpx;
    border-radius: 24rpx;
    line-height: 49rpx;
    text-align: center;
    font-size: 26rpx;
    color: #FFFFFF;
  }
  .hotGroup-header+p{
    font-size: 26rpx;
    color: #888888;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin: 12rpx 0 19rpx;
  }
  .hotGroup-header-title>p:first-child{
    font-size: 32rpx;
    color: #323232;
    font-weight: 500;
    width: 400rpx;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
  .hotGroup-header-title>p:last-child{
    width: 50rpx;
    height: 26rpx;
    background-color: #5FC3F0;
    border-radius: 10rpx;
    margin-top: 15rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 10rpx;
  }
  .hotGroup-header-title>p:last-child>span{
    color: #ffffff;
    font-size: 18rpx;
    margin-left: 4rpx;
  }
  .hotGroup-hot{
    padding: 30rpx 0;
    width: 100%;
    border-bottom: 1rpx solid #EEEEEE;
    box-sizing: border-box;
  }
  .hotGroup-choicenessAll{
    border: none;
  }
  .hotGroup-hot-title{
    display: flex;
  }
  .hotGroup-hot-title>p:first-child{
    font-size: 28rpx;
    color: #EF5A56;
  }
  .hotGroup-hot-title>p:last-child{
    font-size: 28rpx;
    color: #323232;
    padding-left: 9rpx;
    box-sizing: border-box;
    width: 78%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
  }
  .hotGroup-hot-content{
    display: flex;
    align-items: center;
    margin-top: 19rpx;
  }
  .hotGroup-hot-content>p{
    font-size: 20rpx;
    color: #B4B4B4;
    margin-left: 30rpx;
  }
  .hotGroup-hot-content>div>img{
    width: 48rpx;
    height: 48rpx;
    border-radius: 50%;
  }
  .hotGroup-hot-content>div{
    position: relative;
  }
  .hotGroup-choiceness{
    color: #F48E4A !important;
  }



  .collectProject{
    padding: 30rpx 0;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    border-bottom: 14rpx solid #F7F7F7;
  }
  .collectProject>img{
    width: 127rpx;
    height: 180rpx;
  }
  .collectProject-content{
    padding: 17rpx 0 0 20rpx;
    box-sizing: border-box;
    flex: 1;
  }
  .collectProject-content>h1{
    font-size: 30rpx;
    color: #323232;
    font-weight: bold;
    margin-bottom: 20rpx;
  }
  .collectProject-content>p{
    font-size: 24rpx;
    color: #909090;
    font-weight: bold;
    margin-bottom: 9rpx;
  }

  .tags:after{
    content: '/';
  }
  .tags:last-child:after{
    content: '';
  }
  .actor:after{
    content: ' ';
  }

  .actor:last-child:after{
    content: '';
  }
</style>
